<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design model</title>

<link rel="stylesheet" href="js/easyui-1.3.0/themes/default/easyui.css" />
<link rel="stylesheet" href="js/easyui-1.3.0/themes/icon.css" />
<script src="js/jquery/jquery-1.8.2.js"></script>
<script src="js/easyui-1.3.0/jquery.easyui.min.js"></script>
<script src="js/uuid.js"></script>
<script type="text/javascript">

$(function(){
	$(document).bind('contextmenu',function(e){
		e.preventDefault();
		$('#popupMenu').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	});
	$('#addModelDialog').dialog({});
	$('#addModelDialog').dialog('close');

	$('#renameModelDialog').dialog({});
	$('#renameModelDialog').dialog('close');
	//makeEditTable($('#fields'));
	
	//$('#modelPanel').draggable('enable');
});
var currentModelName="";
function showModel(obj){
	var modelName =$(obj).text();
	var table =$('#'+modelName);
	if(table.html()!=null){
		table.window('open');
		return;
	}
	$('#modelNameHidden').val(modelName);
	var pname=$('#projectNameHidden').val();
	var html=$('#modelPanel').html();
	table = $(html);
	table.attr('class','easyui-window');
	table.attr('title',modelName);
	table.attr('id',modelName);
	table.appendTo('body');
	
	table.window({
		minimizable:false,
		maximizable:false,
		collapsible:false
	});
	table.window('open');
	var url = 'loadjson?parent=loadmodel&projectName='+pname+'&modelName='+modelName;
	
	makeEditTable(table,url);
}

function showModelMenu(model){
	currentModelName=$(model).text().trim();
	$('#modelNameHidden').val(currentModelName);
}

function doMenu(){
	$('#modelMinPanel').find('a').menubutton({disabled:false});
}
function toSql(){
	$('#toSql').click();
}

function editData(){
	var url = 'editModelData?projectName='+$('#projectNameHidden').val()+'&modelName='+currentModelName
	window.open(url);
}
</script>
</head>
 
 
<body>
<div id="modelMinPanel" wicket:id="modelMinPanel">
<a wicket:id="modelList" href="javascript:void(0)" class="easyui-menubutton" onmousemove="showModelMenu(this)" data-options="menu:'#modelMenu'">
<span wicket:id="model" onclick="showModel(this)" ></span>
</a>
</div>
<!-- popup menu -->
<div id="popupMenu" class="easyui-menu" style="position:absolute;width:120px;">
	<div onclick="javascript:$('#addModelDialog').dialog({});$('#modelName').focus();">add model</div>
	<div onclick="javascript:document.execCommand('Refresh');">refresh</div>
</div>
<div id="addModelDialog" title="Add Model" style="width:300px;height:80px;">
	<span>model name</span><input class="easyui-validatebox" type="text" data-options="required:true" id="modelName"></input>
	<br/>
	<input type="button" value="save" onclick="addModel()"/>
</div>
<div id="renameModelDialog" title="Rename Model" style="width:300px;height:80px;">
	<span>model name</span><input class="easyui-validatebox" type="text" data-options="required:true" id="newModelName"></input>
	<br/>
	<input type="button" value="save" onclick="javascript:$('#newModelNameHidden').val($('#newModelName').val());$('#rename').click()"/>
</div>
<div id="modelMenu" class="easyui-menu" style="position:absolute;width:120px;">
	<div onclick="javascript:$('#renameModelDialog').dialog({})">rename</div>
	<div onclick="javascript:$('#deleteModel').click();">delete</div>
	<div onclick="editData();">add data</div>
	<div onclick="toSql()">toSql</div>
</div>

<div id="modelPanel">
<table  style="width:540px;height:auto;display:none"
	data-options="singleSelect:true" >
<thead>
	<tr>
		<th data-options="field:'uid',width:20"></th>
		<th data-options="field:'attrName',width:100,editor:{type:'validatebox',options:{required:true}}">名称</th>
		<th data-options="field:'attrType',width:60,
				editor:{
					type:'combobox',
					options:{
						valueField:'name',
						textField:'name',
						data:types,
						required:true
					}
				}">类型</th>
		<th data-options="field:'attrLength',width:40,align:'right',editor:'numberbox'">长度</th>
		<th data-options="field:'nullable',width:60,editor:{type:'checkbox',options:{on:'true',off:'false'}}">允许为空</th>
		<th data-options="field:'commnent',width:200,editor:'text'">描述</th>
	</tr>
</thead>
</table>

</div>

 <form wicket:id="ajaxForm">
 <input type="hidden" wicket:id="modelData" id="modelData" name="modelData"/>
 <input type="hidden" wicket:id="modelName" id="modelNameHidden" name="modelName"></input>
 <input type="hidden" wicket:id="newModelName" id="newModelNameHidden" name="newModelName"></input>
 <input type="hidden" wicket:id="projectName" id="projectNameHidden" name="projectName"></input>
 <a href="#" wicket:id="alink"><span id="saveModel"></span></a>
 <a href="javascript:void(0)" id="deleteModel" wicket:id="deleteModel"></a>
 <a href="javascript:void(0)" id="toSql" wicket:id="toSql"></a>
 <a href="javascript:void(0)" id="rename" wicket:id="rename"></a>
 </form>

<!-- hidden tool -->

</body>
</html>